{extend name="admin/base"}

{block name="content"}
<div class="layui-card">
    <div class="layui-card-header">云存储配置管理</div>
    <div class="layui-card-body">
        <div class="layui-btn-group">
            {foreach name="types" item="name" key="type"}
            <a href="{:url('add')}?type={$type}" class="layui-btn layui-btn-normal">添加{$name}</a>
            {/foreach}
        </div>
        
        <table class="layui-table" lay-size="sm" lay-filter="cloudstorage-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>存储类型</th>
                <th>配置名称</th>
                <th>访问域名</th>
                <th>是否默认</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
{/block}

{block name="script"}
<script>
    layui.use(['table', 'form'], function(){
        var table = layui.table;
        
        table.render({
            elem: '#cloudstorage-table',
            url: '{:url("index")}',
            cols: [[
                {field: 'id', width: 60, title: 'ID'},
                {field: 'type', title: '存储类型', templet: function(d){
                    var types = {:json_encode($types)};
                    return types[d.type] || d.type;
                }},
                {field: 'name', title: '配置名称'},
                {field: 'domain', title: '访问域名'},
                {field: 'is_default', width: 80, title: '是否默认', templet: function(d){
                    return d.is_default ? '<span class="layui-badge layui-bg-green">是</span>' : '<span class="layui-badge">否</span>';
                }},
                {field: 'status', width: 80, title: '状态', templet: function(d){
                    return d.status ? '<span class="layui-badge layui-bg-green">启用</span>' : '<span class="layui-badge layui-bg-gray">禁用</span>';
                }},
                {width: 200, align: 'center', toolbar: '#table-bar', title: '操作'}
            ]],
            page: false
        });
        
        // 工具条事件
        table.on('tool(cloudstorage-table)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                window.location.href = '{:url("edit")}?id=' + data.id;
            } else if(obj.event === 'del'){
                layer.confirm('确定要删除这条配置吗？', function(index){
                    $.post('{:url("del")}', {id: data.id}, function(res){
                        if(res.code === 1){
                            layer.msg(res.msg, {icon: 1});
                            obj.del();
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }, 'json');
                    layer.close(index);
                });
            }
        });
    });
</script>

<script type="text/html" id="table-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
{/block}
